<template>
    <div>
        <section class="top">
            <van-row>
                <van-col span="20">
                    <span>BANNER/海报</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(bannerClass)">选择</van-button>
                </van-col>
            </van-row>
            <banner-temp :tempEngine="bannerClass"/>
        </section>
        <section>
            <van-row>
                <van-col span="20">
                    <span>一宫格</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(oneBox)">选择</van-button>
                </van-col>
            </van-row>
            <one-box-temp :tempEngine="oneBox"/>
        </section>
        <section>
            <van-row>
                <van-col span="20">
                    <span>二宫格</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(twoBox)">选择</van-button>
                </van-col>
            </van-row>
            <two-box-temp :tempEngine="twoBox"/>
        </section>
        <section>
            <van-row>
                <van-col span="20">
                    <span>三宫格</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(threeBox)">选择</van-button>
                </van-col>
            </van-row>
            <three-box-temp :tempEngine="threeBox"/>
        </section>
        <section>
            <van-row>
                <van-col span="20">
                    <span>一二布局</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(oneTwoBox)">选择</van-button>
                </van-col>
            </van-row>
            <one-two-temp :tempEngine="oneTwoBox"/>
        </section>
        <section>
            <van-row>
                <van-col span="20">
                    <span>二一布局</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(twoOneBox)">选择</van-button>
                </van-col>
            </van-row>
            <two-one-temp :tempEngine="twoOneBox"/>
        </section>
        <section>
            <van-row>
                <van-col span="20">
                    <span>四宫格</span>
                </van-col>
                <van-col span="4">
                    <van-button round size="mini" @click="getTemp(fourBox)">选择</van-button>
                </van-col>
            </van-row>
            <four-box-temp :tempEngine="fourBox"/>
        </section>
    </div>
</template>
<script>
import bannerTemp   from '@/components/temp/banner'
import oneBoxTemp   from '@/components/temp/oneBox'
import twoBoxTemp   from '@/components/temp/twoBox'
import threeBoxTemp from '@/components/temp/threeBox'
import oneTwoTemp   from '@/components/temp/oneTwoBox'
import twoOneTemp   from '@/components/temp/twoOneBox'
import fourBoxTemp  from '@/components/temp/fourBox'

import {banner, oneBox, twoBox, threeBox, oneTwoBox, twoOneBox, fourBox} from './base'
export default {
    data() {
        return {
            bannerClass : banner,
            oneBox      : oneBox,
            twoBox      : twoBox,
            threeBox    : threeBox,
            oneTwoBox   : oneTwoBox,
            twoOneBox   : twoOneBox,
            fourBox     : fourBox
        }
    },
    components: {
        bannerTemp,
        oneBoxTemp,
        twoBoxTemp,
        threeBoxTemp,
        oneTwoTemp,
        twoOneTemp,
        fourBoxTemp
    },
    methods: {
        async getTemp(cls){
            await this.$store.dispatch('setIsEdit', true)
            await this.$store.dispatch('setCacheTemp', cls)
            this.$router.replace('/workDesk')
        }
    }
}
</script>
<style lang="scss" scoped>
.top{
    margin-top: 50px;
}
span{
    font-size: 14px;
    color: #606266;
}
section {
    margin: 10px 0;
    box-shadow: 0 2px 2px #DCDFE6;
    border: 1px solid #EBEEF5;
}

.van-button {
    background-color: #409EFF;
    border: 1px solid #409EFF;
    color: #FFF;
}
</style>
